<template>
	<div>
        <div id="colorlib-page">
		<div class="row">
			<div class="col-md-4"></div>
			<div class="col-md-5">
				<ul id="list">
					<li v-for="(item, index) in work" :key="index"><a href="javascript:;" @click="postwork(wid=item.w_id)">{{item.w_name}}</a></li>
				</ul>
			</div>
		</div>
		<div id="colorlib-work">
			<div class="container">
				<div class="row text-center">
					<h2 class="bold">Works</h2>
				</div>
				<div class="row" id="workS">
					<div class="col-md-12" v-for="(item, index) in list" :key="index" >
						<div class="work-entry-flex animate-box js-fullheight">
							<div class="col-three-forth js-fullheight">
								<div class="row no-gutters">
									<div class="col-md-12  no-gutters" :class="[item.l_id%2==0?'col-md-push-10':'']">
										<div class="work-img js-fullheight">
                                        <img :src="item.l_img" alt="">
										</div>
									</div>
								</div>
							</div>
							<div class="col-one-forth js-fullheight">
								<div class="row no-gutters">
									<div class="col-md-12  no-gutters" :class="[item.l_id%2==0?'col-md-pull-12':'']">
										<div class="display-t js-fullheight">
											<div class="display-tc js-fullheight">
												<div class="text-inner text-inner-right">
													<h2><a :href="/#/+item.l_link">{{item.l_title}}</a></h2>
													<p>{{item.l_content}}</p>
													<!-- <p><a :href="/#/+item.l_link" @click="postwork(lid=item.l_id)" class="btn-view">{{item.l_name}}</a></p> -->
													<p><router-link tag="a" :to="{name:'workSingle',params:{id: item.l_id}}" class="btn-view" >{{item.l_name}}</router-link></p>
												</div>
											</div>
										</div>
									</div>
								
								</div>
							</div>
						</div>
					</div>
                    
				</div>
			</div>
		</div>
	<footer>
			<div id="footer">
				<div class="container">
					<div class="row">
						<div class="col-md-4 col-pb-sm text-center">
							<div class="row">
								<div class="col-md-10">
									<h2>Office</h2>
									<p>291 South 21th Street, <br> Suite 721 New York NY 10016</p>
								</div>
							</div>
						</div>
						<div class="col-md-4 col-pb-sm text-center">
							<h2>Get in Touch</h2>
							<p><a href="#">noah@info.com</a></p>
						</div>
						<div class="col-md-4 col-pb-sm text-center">
							<h2>Social</h2>
							<p class="colorlib-social-icons">
								<a href="#"><i class="icon-facebook4"></i></a>
								<a href="#"><i class="icon-twitter3"></i></a>
								<a href="#"><i class="icon-googleplus"></i></a>
								<a href="#"><i class="icon-dribbble2"></i></a>
							</p>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12 text-center">
							<p>
							</p>
						</div>
					</div>
				</div>
			</div>
		</footer>
	</div>
	</div>
</template>
<script>
import {work} from '../api/index.js';
export default {
	name:'work',
	data(){
		return{
			work:[],
			list:[],
			essay:[],
			wid:'1',
			lid:'1',
		}
	},
	methods: {
		async postwork(){
			let wid=this.wid;
			let lid=this.lid;
			var result=await work({wid:wid,lid:lid});
			console.log(result);
			this.work=result['message']['work'];
			this.list=result['message']['list'];
			this.essay=result['message']['essay']; 
		}
	},
	mounted(){
		this.postwork();
	}
}
</script>